<template>
	<view class="content">
		<u-navbar title="注册" :autoBack="true" bgColor="rgba(0, 0, 0, 0)" placeholder>
		</u-navbar>
		<view class="login-bg">
			<image :src="$IMG_URL+'bg.png'" mode="aspectFill" style="width: 100vw;height: 100vh;"></image>
		</view>
		<image :src="$IMG_URL+'logo.png'" style="width: 185rpx;height: 185rpx;margin-top: 40rpx;"></image>
		<view class="register-con">
			<view style="width: 100%;">
				<u-input placeholder="请输入手机号" fontSize="31rpx" placeholderStyle="color: #999999" border="bottom"
					v-model="tel"></u-input>
			</view>
			<view style="width: 100%;margin-top: 40rpx;">
				<u-input placeholder="请输入验证码" fontSize="31rpx" placeholderStyle="color: #999999" border="bottom"
					v-model="smsCode">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
						<text @click="getCode" style="color: #0277DE;font-size: 31rpx;">
							{{tips}}
						</text>
					</template>

				</u-input>
			</view>
			<view style="width: 100%;margin-top: 40rpx;">
				<u-input v-if="passwordAtype" password placeholder="设置6-18位登录密码" fontSize="31rpx"
					placeholderStyle="color: #999999" border="bottom" v-model="passwordA">
					<template slot="suffix">
						<u-icon color="#999999" name="eye" @click="passwordAtype = !passwordAtype"></u-icon>
					</template>
				</u-input>
				<u-input v-else placeholder="设置6-18位登录密码" fontSize="31rpx" placeholderStyle="color: #999999"
					border="bottom" v-model="passwordA">
					<template slot="suffix">
						<image :src="$IMG_URL+'hide.png'" style="width: 16px;height: 16px;"
							@click="passwordAtype = !passwordAtype">
						</image>
					</template>
				</u-input>
			</view>
			<view style="width: 100%;margin-top: 40rpx;">
				<u-input v-if="passwordBtype" password placeholder="请再次输入一次密码" fontSize="31rpx"
					placeholderStyle="color: #999999" border="bottom" v-model="passwordB">
					<template slot="suffix">
						<u-icon color="#999999" name="eye" @click="passwordBtype = !passwordBtype"></u-icon>
					</template>
				</u-input>
				<u-input v-else placeholder="请再次输入一次密码" fontSize="31rpx" placeholderStyle="color: #999999"
					border="bottom" v-model="passwordB">
					<template slot="suffix">
						<image :src="$IMG_URL+'hide.png'" style="width: 16px;height: 16px;"
							@click="passwordBtype = !passwordBtype">
						</image>
					</template>
				</u-input>
			</view>
			<view class="login-but">
				<u-button type="primary" shape="circle" text="注册" @click="submitForm"></u-button>
			</view>
			<view class="register-xy">
				<u-checkbox-group shape="circle" v-model="checkbox" size="31rpx">
					<u-checkbox name="checked">
					</u-checkbox>
				</u-checkbox-group>
				<text>已阅读并同意</text>
				<text style="color: #0277DE;">《用户服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		smsApi,
		regApi
	} from '@/api/user'
	export default {
		data() {
			return {
				passwordBtype: true,
				passwordAtype: true,
				checkbox: [],
				tips: '',
				tel: '',
				smsCode: "",
				passwordA: '',
				passwordB: '',
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (!this.tel) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!uni.$u.test.mobile(this.tel)) {
					uni.$u.toast('请输入正确的手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					const res = await smsApi({
						mobile: this.tel
					})
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				} else {
					uni.$u.toast(this.tips);
				}
			},
			async submitForm() {
				if (!this.tel) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!uni.$u.test.mobile(this.tel)) {
					uni.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.smsCode) {
					uni.$u.toast('请输入验证码')
					return
				}
				console.log(this.passwordA, this.passwordA.length);
				if (!this.passwordA || this.passwordA.length < 6 || this.passwordA.length > 18) {
					uni.$u.toast('请设置6-18位登录密码')
					return
				}
				if (this.passwordA !== this.passwordB) {
					uni.$u.toast('两次输入的密码不一致')
					return
				}
				if (!this.checkbox.length) {
					this.checkbox = ['checked']
				}
				uni.showLoading({
					title: '注册中...',
					mask: true
				})
				const res = await regApi({
					tel: this.tel,
					smsCode: this.smsCode,
					password: this.passwordA

				})
				uni.hideLoading()
				uni.setStorageSync('token', res.msg)
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;

	}

	.register-con {
		margin-top: 77rpx;
		width: 688rpx;
		padding: 60rpx 46rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
	}


	.login-but {
		width: 100%;
		margin-top: 90rpx;

		& ::v-deep .u-button {
			height: 77rpx !important;
			font-size: 31rpx !important;
			font-weight: 500 !important;
		}

		& ::v-deep .u-button__text {

			font-size: 31rpx !important;
			font-weight: 500 !important;
		}

	}

	.register-xy {
		font-size: 23rpx;
		color: #999999;
		margin-top: 31rpx;
		display: flex;
		align-items: center;
	}
</style>